<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性（10个属性）</title>
		<!-- 文本格式化属性 （4种方式  10个属性）
		1.控制字体：font-family（字体家族）、font-size、font-weight
		2.控制文本布局【对齐、间隙】：text-algin、line-height、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration、text-shadow
		4.处理文本效果：white-space
		-->
		
		<style>
			/*知识点：CSS3语法：选择器{
				             属性： 属性值；
			                 属性： 属性值；
			                    }
								叫法：一个样式
								id选择器语法：html元素加id="别名"
								             css中加#别名选中
						        提醒：加权    元素选择器名  1
								             id选择器     100
								*/
							   
		div#word{
		color:#81a380;
		   /*知识点1：文本格式化属性 -->1.针对控制字体
		   font-family（字体家族）：微软雅黑，华文彩云；【sans-serif（黑体】）
		   问题：可以设置多个字体，浏览器会按照顺序找字体！
		   兼容考虑：用户电脑字体缺失，对应找可以使用字体！
			*/
		   font-family: 华文彩云,sans-serif;
		   /*知识点2：文本格式化属性-->2.针对控制字体
		   font-size字体尺寸：px/em；
		   px---PC端----像素，特点：绝对值
		   em---移动端----特点：相对于父元素字体大小，倍数
		   */
		  font-size: 5em;
		  /*知识点3：文本格式化属性-->3.针对控制字体
		  font-weight字体粗细程度属性： 100.200.300.....900;
		  用法：全局字体，通配选择器中使用，400和700
		  400正确粗细大小    对应   normal正常
		                          bold相对于父元素加粗
								  light相对于父元素变细
								  
		  */
		 font-weight: 900;
		}	
		div p.p1{
			color:#c35c6a;
		}		
		
		div h1.h1{
			/*知识点4：文本格式化属性--针对控制文本格式
			juetify(两端对齐：字体空间长)
			*/
			text-align: juetify;
			/* 两端对齐：字体空间长，使用位置：弹性布局 */
			color: aqua;
			font-family: 华文彩云;
		}		   
			
			
		/* 派生选择器【后代选择器】 */		 
		div span{
			height: 100px;
			  border: 1px solid royalblue;
		  /* 行转块 */
		  display:block;
		  /* 知识点5：文本格式化属性---文本对齐方式【垂直】
		   line-height:行高属性
		   使用方法：一定跟高度一起出现【垂直】
		   */
		  line-height: 60px;
		    /* 知识点6：文本格式化属性--文本间隙【字符】 */
		  	letter-spacing: 1px;
		  	 /* 知识点7：文本格式化属性--文本间隙【单词】 */
		  	 word-spacing: 10px;
		  	/* 补充：1.所有的单词大写 2.所有单词首字母大小 3.首行缩进200px */
		  	text-transform: uppercase;
		  	text-transform: capitalize;
		  	text-indent: 200px;
		}		   
				 
				 
				 
				 
		a{
			/* 知识点8：文本修饰效果，针对超链接
			使用方法：与通配选择器一起使用
			none:去掉超链接下划线
			underline:默认，下划线，切换
			line-through:删除线，被html5中元素取代
			*/
			 text-decoration: line-through;
			/* 知识点9：文本修饰效果，针对超链接和文本
			 text-shadow 文本阴影属性
			 属性值：X值 Y值  blur模糊距离   颜色；
			
			 */
			text-shadow: 5px 5px 10px mediumvioletred;
		}		 
			
			
			
			
			p{
				border: 1px solid yellowgreen;
			/* 知识点10：white-space 换行属性
			 属性值不同效果不同
			 nowrap  效果：不换行，作用：在一行显示，不可以超出范围
			         使用特点：溢出
			 pre     效果：保留空格和回车
			 nomal  默认，
			 */
			whit e-space:nowrap;  /*不换行，就一行*/
			overflow:hidden;  /*其他行省略*/
			
			wh ite-space:pre;  /*保留原始文本空格和回车*/
			
			white-space:nomal; /*默认，空格合并，自动换行*/
			}	 
				   
		</style>
	</head>
	<body>
		<h1>处理文本效果【换行和溢出】</h1>
		<p>Lo   
		rem ipsu
		m dolor sit 
		amet consectetur 
		adipisicing elit. Praes
		entium, animi? Repudiandae, delectus. Nesciunt vitae maxime est fugit? Mollitia fugit deserunt obcaecati accusantium iste! Nisi magnam excepturi aliquam alias voluptatibus harum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic architecto quia illo officia, quaerat suscipit cupiditate accusamus animi. Voluptatum modi possimus vitae rem consectetur nostrum eum officiis quod. Cupiditate, omnis. </p>
		
		
		
		
		
		
		
		
		<h1>
			<marquee >控制文本布局[对齐、间隙]</marquee>
		</h1>
		
		<!-- 需求：创建div，内嵌span元素，增加假文 
		    设置样式：添加1个像素实线边框，高度：25px
			派生选择器找到span元素
		-->
		<div >
			<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate optio ipsum ab eos nobis beatae dolorum autem laborum. Ab voluptatum dolorem excepturi libero quasi inventore vero praesentium, rem placeat possimus!</span>
		</div>
		
		
		<!-- 需求：创建a元素，超链接跳转到唐工官网 -->
		<div style="height: 200px;"></div>
		<h1>文本修饰效果</h1>
		<a href="http://ehall.tsgzy.edu.cn/new/index.html">跳转到唐工的官网</a>
		
		
		
		
		
		
		<div>
			<p class=p1>
				哇啦哇啦Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis a maxime assumenda magni impedit dolorem quas, at, et vel blanditiis, voluptas incidunt cumque corporis error ipsam fugit. Id, veniam nesciunt?
			</p>
		</div>
		<div id="word">噫嘘唏Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nisi, eos asperiores culpa maxime earum maiores minima libero veritatis molestiae illum accusantium? Eaque quam assumenda accusamus magni dicta porro quidem!</div>
	<!-- 需求：外层div  内层h1,俩别名，css任意别名字体设置颜色
	     需求：加权方式
	 -->
	     <div>
			 <h1 class="h1 h2">lorem</h1>
		 </div>
	</body>
</html>